<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      传递给子组件一些数据方面的东西，可以使用 prop。如果要传递 html 结构的东西，则使用插槽


      插槽的基本使用：
          1. 组件内先使用 <slot></slot> 做好占位
          2. 使用该组件时，在组件开始标签与闭合标签中传递内容，该内容会自动渲染到组件内 slot 的位置

     -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        // 根组件
        template: `
          <div>
            <h1>根组件</h1>

            <hello name="张三">
              <button>按钮</button>  
            </hello>

            <hr />

            <hello name="张三">
              <p>按钮</p>  
            </hello>
          </div>
        `,
      });

      app.component("hello", {
        props: ["name"],

        template: `
          <div>

            <slot></slot>

            <h2>Hello, {{ name }}</h2>

            <slot></slot>

            
          </div>
        `,
      });

      // 挂载应用
      app.mount("#app");
    </script>
  </body>
</html>
